import React, {Component} from 'react';
import {Route, NavLink} from 'react-router-dom';
import {connect} from 'react-redux';
import {modName} from '@/store/actions';
import ModName from '@/components/charp5/ModName';
import ModAge from '@/components/charp5/ModAge';
import Course from '@/components/charp5/Course';
import styles from '@/assets/style/user-center.module.scss';
import CSSModules from 'react-css-modules';
// import Modal from '@/components/modal/modal';
import Modal from '@/components/modal';
import '@/assets/style/global.scss';
// import Loading from '@/components/Loading';
import Modal2 from '@/components/modal2/modal';
import Loading from '@/components/Loading2';

@CSSModules(styles, {allowMultiple: true})

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      open: false
    };
    this.fnClick = this.fnClick.bind(this);
  }
  fnClick () {
    this.props.modName(this.refs.refInput.value);
  }
  modalConfirm = () => {
    this.setState({open: false});
  }
  modalCancel = () => {
    this.setState({open: false});
  }
  showModal = () => {
    Modal.success({
      title: 'Demo',
      content: 'Hello World',
      onConfirm: () => console.log('confirm'),
      onCancel: () => console.log('cancel'),
      onRest: () => console.log('完成')
    })
  }
  showLoading = () => {
    Loading.show();
    setTimeout(() => {
      Loading.hide();
    }, 3000);
  }
  render () {
    const {name, age} = this.props.user;
    const {list} = this.props.course;
    return (
      <div>
        <h2>App</h2>
        <div>姓名: {name}</div>
        <div>年龄：{age}</div>
        <div>
          <NavLink styleName="link" activeClassName={styles.linkActive} to="/modname">修改姓名</NavLink>
          <NavLink styleName="link" activeClassName={styles.linkActive} to="/modage">修改年龄</NavLink>
        </div>
        <div>
          <Route path="/modname" component={ModName}></Route>
          <Route path="/modage" component={ModAge}></Route>
        </div>
        <hr/>
        <h3>
          课程
          <Course></Course>
        </h3>
        {
          list.length === 0 && <div>暂无</div>
        }
        <ul>
          {
            list.length > 0 && list.map(course => (
              <li key={course.id}>{course.name}</li>
            ))
          }
        </ul>

        <button onClick={this.showModal}>弹出modal</button>
        {/* <Modal
          isOpen={this.state.open}
          title="Demo"
          type="alert"
          onConfirm={this.modalConfirm}
          onCancel={this.modalCancel}
        >
          <div>Hello World</div>
        </Modal> */}
        <button onClick={this.showLoading}>打开Loading</button>

        {/* <Modal2>
          <div>modal</div>
        </Modal2> */}
        {/* <Loading></Loading> */}
      </div>
    )
  }
}

export default connect((state, props) => Object.assign({}, props, state), {
  modName
})(App);